2 



www.typo.pk 
www, itdaras gah. com 
a >\A^6<ij\P^J^\J ! fjijdM 15-07-1 8 
ata.rafi88@gmail.com 



-U? click-ableiy^^L/j^j^wlTj'iIfci*'^ 
-^c£u^Jr£rV^£/taplJ^ 

-Ut^^r VL>^y"^/tapL^ t£ ^i^ T W^4^y: 



6 

7 U&s>j/ 



> 










0 eJvW**\[$js/* £> 

0 Tag::^ 

0 J$J^j/j3iJ%3i 

1 ^<body> 

2 ElementibiX-^l 

3 02 cUiVlJvi/ 

3 Stand Alone Tags 



6 Jtjfid&dtf 

13 Attribute: ^rtfo 

14 Q^id^st-fA 

16 ^U^L;l> 

18 ctlW/tf 

19 ^J'A* 

20 tf\}j):b)iJ>\SUj)j> 

20 ylr 

20 ±>yj 

21 

21 White Space 

22 J$ Line Break 

22 J/ j£ J}<p>Ji <br /> 

23 Horizontal Rule \\/$$\ 

24 Wysiwyg Editor- /i,X)^f}{$j} 



7 Jjfid&dtf 

24 WYSIWIG Editors:; /S\J^}> 

25 l/d t \Ji\$hj*r'ji> 

26 1^.{$j3j>UJ&£'J&f 

27 f^^JJ^ Jjgt 

28 <J&t 

30 ^M^Ji 

32 Ordered Lists .1 

32 Unordered Lists .2 

32 Definition List .3 

32 ^#<ol> 

33 ^<li> 



8 Jrjfid&dtf 



34 fU'tfj'JLr 

35 %J>fLJtojr 

36 kfj$utji'\f^tjjf~\i&\» 

39 .jC^fa* 

39 £)s 

40 j^jajiUsj^ 

41 ^f*-* 7 ' Home page 

41 Relative URLs 

43 i/iXtf 

43 bi/jtihiS^i/u^ 

45 tvCtf/ sl&Jfc LH&Jj 

46 ^r^io^" 



9 Jrjfid&dtf 



/j\J>xx IMAGES 

48 ^<img>:: 

49 y±g/sl Src 

49 Alt 

49 title 

so itiz^iuS^ 

50 12J*\f jjjjy* 

51 i±,*?-/ti{j)ii 

50 \}*>\\jZL.L.fj$jj z 

51 ^ui/J^ i A^/ ^Li-f^%\t 

50 ? l^VJlj^l^6^ljpg 

54 ?tiflf JUl^*-^**^ gifyjl png 

55 ^UJljJ^l/j^jUs 

56 itiz^iiuSs^ 

58 Image Resolution Js's^ty* 1 



10 (ii^j^fcJUT 

58 ^-cjJtfhyj 

59 frf^d'AOS 

60 J JO 

60 [f JO^JI&J- 

60 if jMc/Jil 

61 



63 y^uj/L/Ji^fi^ 

63 Columns! RowcA 

61 J^>tl <table> 

61 ^irff^J? 

63 />Aj? 

64 tIi./u^/^LJ^2L2 

68 

70 



11 (ii^j^fcJUT 



Forms:: j^Otf 

72 U^S^Xf^ 

72 /aJS^" 

73 *\jiL.ftf4rx 

73 Jl>4ljU?f>l> 

74 &t\s\$yJb£\\&\ 

74 ^it : (j'<forms> 

74 *L>yt~/i) action 

74 ^-£7^ method 

74 &£ get 

75 impost 

76 

76 <input> 

76 type="text" 

76 Name 

76 Max Length 
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13 Jrjfid&dtf 

96 ii£±,j£#i#jT 

96 B>'bY.ij^>lJjjT 

98 

98 ^l'i£^rf.>l L /ltf' 

98 tfl/SJ&'t 

ioo kii^ii^jj^ji^iijifjli 

1 00 Block Level Elements 

100 Inline Elements 

101 tAfj/jZJ'ikJCiA J^~\J& j>\jlJ£ 

101 ^#<div> 

1 03 kf^ifcftfuA j^ijiid^ 

103 ^US^L/J^tU^^^J span 

105 y.)ii 

107 ^i^jt^AHJ^^o 

107 meta 

108 Description 

108 keywords 



14 Jjfid&dtf 
108 robots 

108 author 

109 pragma 

109 expires 

no ^/^\ 

110 I 

110 HTML Entities 

112 ^\£-UJ'Al/£l 
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i i ♦ 

Doctor@ITDarasgah.com 



16 



/f 20 14 J^l 1 7- b/J* / »f/L- f*t K'il f^L^Jf /Af / J^f It* J;i 
L HTML SSifSJ^/A-A r J^O/Mj^J 1 

^^Ai/t/^^bat^uCj^So^^^^yi^AAsiJi^^/f^u^ 

&>st tjs /"lAi \J>\ if [ /» ^<~£f\J\ ^ www.itdarasgah.com 



17 

-f-.&jt&jj'Sof stiff "Jjfii&U^ "JttijZc-tyyi&Jtf ut&fof' 
f^^/^CVi J3\ LX. &JL<£rf ^ ^ ^ So* itAj <£-. cJlP i" 

www, itdaras gah. com 



M^-j -i 

♦♦ ♦ 



6 



-•■u? 



-t-tft Steps j%lSjt^*y^jlfi/ 
-<c-0 If yi/tJv 



7 Jjfid&dtf 



8 



«U J^l ^ _£ L//Jl^'"-k j£ Windows ^ 2. ^ Code 

_^L^^^^>>^^^-^^^(^oi^^)NotePad++/^T 





Start Button > Accessories > NotePad 

This is my first web page -l/Z^LVU^U^ 
-jf i KTMLftfj\j}\j?ttjJ})j?\(d?u/( "C Drive V 

-ufX^J}7t /) - myfirstpage.html-f*l , fe / J ' B 



-^-l/V^cT "'^ " -html V>^ft^J'l»:^t^' 

.ji£/J^t^ cT"i ". htm 
_filename.htm :fl^ 



j^.H "Filename'^^Jiv 7 ^! ^Extension" ^L^i 
& ^ If ^,6 Jl5 ^ i/* U? ^ (dot)"." 

.^tr* ".htm" I ".htmrcT^K jVhtml 



10 



^^liM^l^f j'HTML 
Tag:^| .1 
Element:^>^! .2 
Attribute: .3 

Tag::^| .1 

-U? 

Opening Tag . 1 



11 (ii^j^fcJUT 

Closing Tag .2 
tlflJfjtJ^iS^ tag> J$ Js)jf jZ-^tlfUfjt <tag> J 0 Jt^$ J%i\ 

-^t/VtA/ -%aa \jt d^ifr-i- 

<p> this is a paragraph. </p> 

i 1 
i 1 

i 

Openning Tag closing Tag 

ixftf^ </htmi>ji\<z-i*C} /^J>L <html> c/ll HTML Jfi 

<body> 

-S^Ui^J^Sj^^-^^ <body>»-!^^| <html> 



<html> 

<body> 
</body> 

</html> 
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Elemenfcd^i 

{ <p> this is a paragraph. </p >^ 

y 



c/UifV^Z Enterjij)!^^ tji/ html \s,l^i 
spacer! enters 



13 Jrjfid&dtf 

02 &Ut~J* Itf^/* 

Stand Alone Tags 

<br /> f^5r> £ 

<(tag)(sapce)(/)> 

Attribute:^.**./:, 

tag | | quotes | -^term^fjff ^Lbfii&i* 

<p align="center"> ^^S^M^jfd 

i -£ — , r- /jJ^S^-^lslf attribute/ 

attribute value ** I • ' 



14 Jjfid&dtf 

(quote)^j(quote)=^j#./:i(t/^ \)Jf 



tag 



quotes 



<p align="center"> 

/ / 



attribute 



value 



-if\y (center)^ t^io^i/Wi quotes^/" 



*** 



15 lii^J^fcJUT 



16 



* » 

(/^^lU^t^^'/^^'V^^-^^Jl^l^V HTML • 




Headings/ tzfti* 
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HTML 



<M>TMs II 4 Main He4dlnj</hl> 




<i>>Thli Is 4 Level 2 Headtnj</li2> 




<H3>TMs Is a level 3 Headln«</tiJ> 




<i4>Thh Is a Level 4 Headtn«</ti4> 




<hS>Tlils Is a Level 5 Headlng</hS> 




<h6>TMs Is a Level 6 Headtn«</M> 






This is a Main Heading 




This is a Level 2 Heading 




1 hi- i- .1 Level 3 Heading 




lb:.halnvl IH.iJie 




l\bl>i L..<ISII™l!iti 




nkhal*Ml4»«tt« 





<hl> 
<h2> 
<h3> 



<h4> 
<h5> 
<h6> 



4-£dtP J$<hl>-a} 
tifl&J-^d^dj <h2>_^fl f 110 

h _ • 

^ >V K <hl > ^ ^ ^-u? 

UV!^ f I? >V ^ <h6> Ji\ciyi\^c^ 
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<html> 
<head> 

<title> My first web page </title> 
</head> 
<body> 

This is my first web page 
How exciting 
</body> 
</html> 

This is my first web page. How exciting. 

>fj^ <i^{J~Jj(-\d&-^tfj£&^jj>'ij'J spaces £-'<z- j wL^jTi-u? 
d)ifl{£6)£js\\lf^f<-j spacQSif 



20 (il^j^fcJUT 

<p>This is my first web page</p> 
<p>How exciting</p> 

tat \f{ J^)j>\jJ refresh/ wi^i-f taijl^i <L L >3\f\& J$ <p> 







This is a bold text. 


<strong>L <bold> 


This is an italicized text. 


<i> 


This is an underlined text. 


<u> 





-0?^J^^D>^^i^(-/tr/^i)emphasis^HTML 

<b> bold </b> .a 
<strong> bold </strong> .b 



-U?^b>«^//c/'(jl/^)Italic .2 
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<i> italic </i> 
<em> italic </em> 



.a 
.b 



<p> 



Yes, that <em>is</em> what I said. 
How <strong>very</strong> exciting. 
</p> 



(th)ttf 5 th ^ (superscript)^/^ • 
ii)Jl h 2 o^5 (subscript)^/^- • 



4' 






5 th Dec 


5<sup>th</ sup>Dec 




H 2 0 


H<sub>2</sub>0 





White Space 

spaces tiijc-JZhs/e- (f[f j^-^^jt Jjfi&&/fy'f<Ji3 ir '& 
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spacet/'i-Ti/ enters^L;^^ 
-cJrtflf white space collapsing/ f J \ 

Jjfi6& J^-lr^gfj^bYWhite space collapsing :^L^i 
-UtZ-Z^^y Jl^iKenter^i spaceA£i_/^l>/i/ 

i-f Line Break 

-tc-fylf absolute tags/^di-^tW^ s^ffyitis/tfifg-dyt 
<br /> 

J/<j£^?<P>^^i?<br /> 

-^l"yWj.> t _i?<p> 

l^' A* « ^ t/' 'f-fr-* Jl^i^-^i-lf^c/uJi^^^ <br> 4? 



23 Jrjfid&dtf 

Horizontal Rule:y^i?i 

<hr /> 



24 (il^j^fcJUT 

Wysiwyg Editor w jmts^^^fiij h 



jiid^/^tMf^^^A^Ji^J^^ Text "^S'[ J\Jz 

Wysiwyg Editor -1 

f ^JJ? Li^V^Content Management System)^ CMS -2 

WYSIWIG Editors.jJzXjJuSh 

/ 41-^. p> ^ i/ tfj ^ ^ ^u!Y «£ ^ j> ^ 

-tf-fylf (Jj(iJj) Wysiwyg editor 
-:^^i£Yot j£/x> wysiwig 

What you see, is what you get 



25 Jrjfid&dtf 
j^>i jt j 0 s till f^>.'J£ Jt Ms. "I /j/jf'ut JtXj *lJ$,)\s j£t 

-a*L.jff-j£/; up 

'•U&Z-x views 2jt0y^L\/\st^cL^J\ 
ijij*><£ (LJ J> jHfis2-\f» :Design View 

/^/^:CodeView 





Adobe Dreamweaver CS3 






File Edit View Insert Modify Text Commands Site Window Help 




▼ Insert Common Layout Forms Data Spry Text | Favorites 


% is | | 111 g - 4 • n B E3 d> • % • 




I 






L^J Code Split Design 


Title: 


St ft. 




W — : tot- — rro 

■ • i ■ 1 1 1 i 1 1 i : 1 1 1 i 


200 1250 3O0 1350 1400 
■ i 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 



-jA> (Split)_3 



-UH&ty ij^jjJ^um views 3 cjl^ 
c/l^i^-2 

(f^vMJlf .3 



sjjib T 
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(j^j)i^f 7^U) (KompoZer)^j/' .4 



*** 



27 Jrjfid&dtf 




Content Management System (CMS) 



S» X. iff J* Jf\ A, L Lk ^cs jCi tljt )*> j*^/ 

^ J^?tJ& J- Jt JF# f&>?J ^ Fil J 01 Ji\ * <J!% 

f?<Js<LL 

"...J 

f U /"Back entf^Zt-tAfJfUiiJ- £Jk&\s^y^ 

_^l~Ul/"Front End"^2. JnJl<L<Cltj^ 



28 (il^j^fcJUT 

Quotation::j^i(/pi 
<blockquote> 

<q> 

jt>Ji }\ Quotes^ 0 o 0c/^>v6>^U • 
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cite attribute 

/; 

<blockquote cite="http: //en. wikipedia.org/wiki/ 
Winnie - the - Pooh " > 

<p>Did you ever stop to think, and forget to 
start 

again?</p> 
</blockquote> 

<p>As A. A. Milne said, <q>Some people talk to 
animals. Not many listen though. That's the 
problem . </ qx/p> 



30 



Jl^i <blockqoute>^i <q>t/"^i » <L. <C zLjW d"~ html • 

-U? 



32 




Ordered Lists j^ J vii/^/w r v' • 
Unordered Lists ^o$l <^?/Jt ' 
Definition List • 

1. Ordered Lists 

2. Unordered Lists 

-^ifS^^J^^S (bulletsW^<y^i^ 

3. Definition List 

(Term)UM jTf u^D 4< U* <^<3lf iS^J&Jb jCtutfjt S^ 1 

J@<0\> 
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Jg<\i> 

-List ltGm^ts:^{j\-u2L-&^t <\\>J-£2-fJ&f { *T 

-^£> J^-^fU 1/ k^<l li>/ J\ML2£fij»\ 

<ol> 

<li>Junaid</li> 

<li>Muhammad Kamil</li> 

<li>Talha</li> 
</ol> 

z-ffl)<ol>4^&jfjj>J'-4f-txJ\fii4-£' Bulleted List^Y<ul>^ 

<ul> 

<li>Junaid</li> 

<li>Muhammad Kamil</li> 

<li>Talha</li> 
</ul> 



*** 



34 (il^j^fcJUT 

^it^'-HyperText^^^i^ "t"^ " h"*^^ "HTML" 

-L^f&\ i dL^j\ t Lj&fdL&'j\-Jl^£-£ L links 

-^Jlfi 'j/j*^)j>t^y'%^^>tj£-<c-i\filzd? (destination)J/* 



35 Jrjfid&dtf 



<a href=" www.itdarasgah.com"> ITDarasgah </a> 



Opening Link Tag 



Closing Link Tag 



^ — ^ t*U l/^ v-t * B^t^L- j u 1 ^ l/ - ' t*U L 1^5 ^^ys:» href <a> 



36 Jrjfid&dtf 

www, itdaras gah. com ^ j—fj& s\j\j»\tLJ 

-^fUl/ Absolute URL/ii/y^^^i-jLu Jr^^ci 
Ul^-^flf l/"link text"/ ±J£[j\sj>L <lz>J$J:j$ji\ <a>^^,i 
click ^J/» JiC jlfe- t-/jfc^Jjl* \g &x &i iT * Je 

Jr*t\Jf y^t/here 



f- ~c- Hyperlink Reference V href f-\ 



www.google.com . www. itdarasgah. com 

Uniform Resource Locator 
f^cAiijCi itdarasgah. comfl^-utjL^^j /^Domain Name J|ivTy 



37 Jtjfid&dtf 
Ji-kx&fi&J&fitJwJ* (iJb*d$ ^J!?\i<d Domain Name 
J$ ^ir^l/ L ^^i/^js />A-Lij\ cF-^lflf Relative URL *j 



39 Jjfid&dtf 



f-i*d$ ^j>/ e 6<^ Domain Name<^ Ji\ <L£-tL 
.^trU if Relative INL^JLJrxi&jjJ&frtJw 



JyiW f Directory Stucture/Folder Stnidiireu^ 

-eJr w/S hti^^S^tf fJ^A fLb 



40 (il^j^fcJUT 

"mysite. com" ft V "jJ)) ±a'j "dMtCj* j|l 



j>\ "Grand Parent'^>tf i-J^V "Child^i "Parent'if-^Z-fJ^i^L 
"child" hJti iij j»\ -L j?d/ hi)) "Parent";^y tf^i ^."Grand Child" 



Example of a Simple Directory Structure 

tp mysite.com 
B £3 main-directory 
directory 1 
B tp directory2 

page2.html 
^ pagel.html 



Paren/Grand Parent 

itf j)\£-d-jSj$jj)f Mysite.com 



ft sourcepage.html J_Zl main directory -^fjJj} 



B (rp directory3 

«y page3.html 
B tD directory4 

page4.html 
J index.html 



directori 1 j} i parent 
-grand parent 
f/ grand child j>\ children 



41 



$f if / Home page 

gfjt/JvfotftjZjjl) "root folder"/^U-a?^L^^YSY^y^^^ 

Domain" J;i vf 4J i/i ~<f- I"-* cA>* <4U ^ ^ ^ k ^ >? 4 

-tJtrx "PathV^i/Uvji^f^ "Name 

www. my site . com/ index . html 

if * J I i sourcepage . htmLj \ 
www.mysite . com/main-directory/directoryl/ 
directory2/ sourcepage . html 



-^^i^l^Uniform Resource Locator J* \j> URL \<zXfi\ 



Relative URLs 

/ l^4» i/b (/ L^-U? 4- ^ <M ^ Absolute URLs ^ 

-^_frw/ Absolute URL 



42 (ilf^j^cJUT 

_<pl~Ul/'Relative URL/ URL/^£ J^lT^ 

f-tlf^ sourcepage. html 

www.mysite . com/main-directory/directoryl/ 
directory2/ sourcepage . html 

«cgw% parent^T^^i-^^^YRelative URL 

-U?2Lij "../" c ^W^i ( yii2J_^ < Ll f t^ Parent folder 

_repeats£Jo^^-^L^repeatAV'7^LV^^2/i 

tfrtJ&^LLbj 1 index.html<^ sourcepage. html^i 
<a href =" ../../.. /index . html">Index</a> 



43 Jjf-^Pd^ 

'if' 

fJsii^j-fJkfjdtjU^ ("Thunder Bird'Y^Vl^)^^^ tfi j/ 

$ \$\^M£j\j>\-c-iyt a mailto: "^Sj^^^iJ' href y^^yti 
<a href=" mailto : ataraf i@typo .pk ">Ata Rafi</a> 
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<a href =" http : //www. example . com" target="_blank"> 
This is website. </a> (opens in new window) 
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<hl id="Pakistan"> 

<a href="#Pakistan"> 

f\^y.y^\^ ^o^.^A^ S?^\f^'^fJ^y_J^^\lj}^^ 

jt/Jrjtjstu^jjMA/j^J/Jky/View Page Source"£/jfc^iv 
http : / / tinyurl . com/ nnqj dbl 



-UZtLrfJ^Uy/ut Ordered Lists • 
-ijtZ-tfJlr^iZlLijZ Unordered Lists • 
-t-ikSdkJ^Siyiib^f f- Definition Lists • 

^ci t/^i) ^ ^ f If Ife g, L if- c- if ^xtyti If" href v>*i i/i • 

d URL uy^y^^/^^^/i^i/^^^(/'tXv r ^ * 

-jjd^ Relative URLsf^X-^ 

-£L- tit bjJ> <^-^lA A » if (J» 
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IMAGES :: /ji*> 

-Ul2-SJ\>^sjU L £@^ TC i .1 
Jt/^^^A^i^jj .2 
Jif^&M\s^sj) .3 

J} <img> ::t/J\ssjl2 
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^r?~/J Src 

source >j src <c jrfs* 2 /*- Irk/ tfu ^*-k\ * 

±<r?~fJ Alt 

^i\J^- S^6^?^U^^U^^^^d^^U^^^^ alt 
^/ Lrj^^^^c/^'f-^ 1/ J?iTi/'^*?<3f J!? 

title 

-(^pCyyr^yj(JV)^L"/hoveryy^ 

alt f JL ^jS Lfjl"X[f{ iJ\i>l J- L ijyojtf j/ £\K\fS. ;_Jf\ 
L.j4&&6^»£- quote c^i^^^V* 1 a\tif~~^uf iaS^g-jy 

-US 



yJUib t 



50 Jjfid&dtf 
http : / / tinyurl . com/ oqj kf lb 



-j2<LstJliZ"itjf heights width^jgyttjMvjtj^^i <img>^)ij^ 

^t/^6iu6&^jg.J& 1i :^>iheight 
-U?<L/c^ ji^tT^i^tf^/i width 



51 Jrjfid&dtf 

align ^*-f-\ JTi ^ «z- tsi Jb^i tjt\ <jt\ if 4~ £ 

i Ul^IS 2 J> £ W j J)i -d* Olf ^ leftL right Sji j»\J3 fc* J^i 
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chapter-05/aligni ng-images-horizontally.html 

<p><img src="i mages/bi rd . gi f " alt-"Bird" width="100" 
height-"100" align-"left" />There are around 
10.000 living species of birds that inhabit 
different ecosystems from the Arctic to the 
Antarctic. Many species undertake long distance 
annual migrations, and many more perform shorter 
irregular journeys . </p> 

<hr /> 

<p><img src="images/bi rd . gi f " alt="Bird" width="100" 
hei ght— " 100" al i gn-"ri ght" />There are around 
10.000 living species of birds that inhabit 
different ecosystems from the Arctic to the 
Antarctic. Many species undertake long distance 
annual migrations, and many more perform shorter 
irregular journeys . </p> 



RESULT 



There are around 10,000 living species of birds thai 
inhabit different ecosystems from the Arctic to the 
^^^^^B Antarctic. Many species undertake long distance 
^H^^r annual migrations, and main more perform shorter 
I \ irregular journeys. 



There are around 10.000 living species of birds that 
inhabit different ecosystems from the Arctic to the 
Antarctic. Many species undertake long distance 
annual migrations, and many more perform shorter 
irregular journeys. 
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2 


1 












c£ ft J*\s 








t-lf if (pixels)^/ c?- 




ft -png I jpeg, gif 












St ^ S Jf S f- 










J^jM jit ^\) jj 2 









































50 Jjfid&U^' 

^JtfJj^U^i jpg 

vji Ur 4 ; A> .J />t/LfJ\ jfie-jj* Surf £-az u^^^^ 
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^(JtfJjI^I^XiijIi gif jtl png 

y^uij Jl^\ijOyuJ f i\^\J^^\^U^^^^^^ pngL gif 



□ on 
Don 

O D O 

o d a 
o a a 

ODD 



o. 




m w rn ra 



m cn 



1 D Q 
ODD 

ii q n 



QQQOQ0ODDO 



J2L 



55 Jjfid&U^' 

-x ^ t?~ JjJ\) to/S, (JL^ u? I~/Jb*"i \f& & & PNG 
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j>t Gimp c[X'»4- i-fd^b yjO f\ 
Ui j* jifjfr JX) {/j &f c- j^/t _u? Photoshop 









1 

















t^Y^nof-i tu^n^i l-/J:v>v 



57 Jjfid&U^' 

vji ^_lf >r 9 ;ui /Lf Jl> cTot ^ ^ message B' Ji j>\j\^ 
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Image Resolution 

to J? «IJ (£f 4 >6 jf lJ lJ 72 i//^ ifal uflf jfe 2. £ ^ci l/^^ 

-US 

V^&tis^^-S-e- Bitmap J^V^u^i GIFUPNGU^JPG 
l/(pixels YJ-i/j} \f (3*/J* ^Oi/Oi, i£/&tL-3iL-j{j:<fJijt 

^ / / ^ ^-/(^ i^-^ c^A^v 

yjuih t 



One Pixel 



59 Jrjfid&di'l 



_Ji_U(^distort)^^ 



(jt^tUki^cf^ZJlOOiS/i J>;_>^ <L<C^;_-^&fJ ^ (dots)^^ 

-&4l/iJ300 



S& ^c> <L J\ - t/l/j it & 'All M fU l tj ^ ^"y ^' / 

* ** ** £ • ** * 



60 Jrjfid&dtf 
-c- (ju cf. iJjx? \jM jtyj\J> j"*' (transparency) tj ' 

4>>LT if sjJ&'UiJ^ \jg?J>\-Ut£*->f 501*30 j^U?^/ 
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jf J./;/ 



Iv^meme/v^; U 1 2 
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-J JpJ* t^M^^y- J^?^ JL^X 

Column^! Row^Jkr 

_^L-Ul/tJr^)Tabel Cell/Ji^i^ 
f (horizontal) Row / ±z (vertical) L. J? 

-c-fy L/< 'rlO column 
^ijji fisJjfie-jL J tj Ul^-jf b^/ rows vjI ;V j£ J; J ^ 

_r^ii/ cell 
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J>^/<table> 

jjt L ^Jjt a & tij£-^J?x Jb*i 2. ZlUss J^dz&i <table> 

<tr> 

row jfij J "d l u!?g &f^L& ^t-utZ-fi) /row ^ ^ J?</i 

-table row^L-J^^tr-utZ^^. ceU^>*iZle/^djfc%> 

<td> 

celltf £J<£o»r l£ row^Ti <td>ib<utZ_t^ <td>^/ cell yr 

-fxJ\i>tJ$<td/>4-£2-SA/ <td> Al -Lu?<jt yowJi 

-Jjf^ffjteJCJfijt html 
^-^^^^(celD^i^^^^Crow^^^^^^o^J:^^^' 



62 (il^j^fcJUT 



<table> 

Cell 1 

<tr> 
<tr> 
<tr> 



Cell 2 



Cell 3 



Cell 4 



<tr> 











<td></td> 


<td></td> 


<td> </ td> 








<td> </ td> 


<td></td> 


<td> </ td> 




<td> </ td> 










<td></td> 


<td> </ td> 


<td> </ td> 



</tr> 
</tr> 
</tr> 
</tr> 



</table> 
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<tabl e> 

<tr> 

<td>15</td> 
<td>15</td> 
<td>30</td> 

</tr> 

<tr> 

<td>45</td> 
<td>60</td> 
<td>45</td> 

</tr> 

<tr> 

<td>60</td> 
<td>90</td> 
<td>90</td> 

</tr> 
</table> 



RESULT 



15 15 30 
45 «) 45 
60 90 90 
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> 

< table border="lpt"> 

<tr> 

<td>K/td> 

</tr> 
</table> 

1 



m/{ -jt-uHif- 'i<C measurement^ Jjfid&-U2^ 
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t-c-J$ Jt# J(l <th> ^(3/t^-«f- f/f *tv* if <td> </l ^#<th> 

-(/ "column" J?\Al<<z-(r sty "row"J?\JfU 
s- S\J& <£-fc c i/* «f- fr-rf Jl^i ^ scope JTi v>*i Zl l/i 

:Jl>J'<th>-aJ'^-j^iJi jfrj»\jlidHj:f <th>;^>uL^ 



This is a heading 


This is a heading 


This is content 


This is content 


This is content 


This is content 


This is content 


This is content 



\f i/l i£ ot 1 (3 $ ^(merging) J^r/ J* (5 / < LU./^ 5 jL;^jjLjj 

-Ut^spanningwJ^/ 
<td>>ii<th>^Jy^^^:»span U^'U^ rows^l^t^ij^l&yLU^ 

-f-lrlf I ^.tfyti colspanL rowspan jii/io^-^C^ji 
^i^Lfy^^iLT^>^'U?^^colspan^/J^^^^^^^ 
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9 am 


10 am 


11 am 


12 am 


Monday 


Geography . 


Math 


Art 


Tuesday 


Gym ^ 


Home Ec 



Code 



<table border="l"> 
<tr> 

<thX/th> 

<th>9am</th> 

<th>10am</th> 

<th>llam</th> 

<th>12am</th> 
</tr> 
<tr> 

< th>Monday< / th> 

<td colspan="2">Geography</td> 

<td>Math</td> 

<td>Art</td> 
</tr> 
<tr> 

< th>Tue sday< / th> 

<td colspan="3">Gym</td> 
<td>Home Ec</td> 
</tr> 
</table> 
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Row Spanning 

-£-&s:jt <th>L <td>^J/^~6^ijf J"- <tr>[f-ijf Spanning.'^jl 





ABC 


BBC 


CNN 


6pm- 7pm 


Newsl 


Comedy 


News 2 


7pm- 8pm 


Sport 


Current Affairs 



Code : — 

<table> J-nr^A^ rOWjL^ 
<tr> 1 — * 1 

<thX/th> 

<th>ABC</th> 

<th>BBC</th> 

<th>CNN</th> 
</tr> 
<tr> 

<th>6pm - 7pm</th> 

<td rowspan="2">Newsl</td> 

<td>Comedy</td> 

< td>News 2< / td> 
</tr> 
<tr> 

<th>7pm - 8pm</th> 
<td>Sport</td> 
<td>Current Affairs</td> 
</tr> 
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</table> 
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^j)L St? US 2-1? U^ 1 ^ f\£jtfjj:\\J$x\Af\ J? 

i<^^U\^'US2^/^u/^j^^}fa£^)^\iui\ui\ 

<thead> 

-£jAxjjn2l. <thead>/ ^UJ^^iS^SJ^ 

<tbody> 

J'^sA tJ($„\kL <tfoot>i^(/ « jLlf T v>'iZl <tbody>i#l JJ^ 

<tfoot> 

-eJeyijZ <tfoot>fj)t«z-i)tfJfS footer ji^T^^ 
frx ^ ySr Lf< 4^ <thead> fl> <uH2j/» <=_ a£> ^/ UiF&MU & 

j^^^^S^U!^^^iu^^'U!^J^LCMS£j^Xjhtm\£ 

-ctf%~>tf <tfoot>^i <thead>^>^/;^>!^-ut^/draw 
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<table> 
<thead> 
<tr> 

<th>Date</th> 
<th>Income</th> 
<th>Expend1ture</th> 
</tr> 
</thead> 
<tbody> 
<tr> 

<th>lst January</th> 

<td>250</td> 

<td>36</td> 
</tr> 
< t r > 

<th>2nd January</th> 
<td>286</td> 
<td>48</td> 
</tr> 

<!-- additional rows as above 
<tr> 

<th>31st January</lh> 
<td>129</td> 
<td>64</td> 
</tr> 
</tbody> 
<tfoot> 
<tr> 
<tdx/td> 
<td>7824</td> 
<td>124K/td> 
</tr> 
</tfoot> 
</table> 



Date 


Income 


Expenditure 


1st January 


250 


36 


2nd January 


285 


48 


3rd January 


260 


42 


4th January 


290 


38 


5th January 


310 


115 


6th January 


168 


14 


7th January 


226 


20 


8th January 


253 


37 


9th January 


294 


33 


ltlth January 


216 


46 


11th January 


244 


29 


12th January 


297 


32 


13th January 


328 


86 


14th January 


215 


38 


15th January 


254 


30 


16th January 


256 


27 


17th January 


311 


68 


18th January 


212 


39 


19th January 


234 


36 


20th January 


221 


43 


21st January 


259 


38 


22nd January 


246 


31 


23rd January 


248 


17 


24th January 


229 


45 


25th January 


263 


34 


26th January 


258 


41 


27th January 


283 


22 


28th January 


256 


30 


29th January 


278 


47 


3(lth January 


251 


15 


31st January 


129 


64 




7824 


1241 
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S<tr>Si/ y$\ A\S\j£tf--£Jc\*& Row by Row J? • 

-a? 

LA^J <td>^ZXfeJtr<u*2~* (Cell)J^^»'iZl Row^ • 
uftf <td>&£-t£u*L&2kui (Row) ^J'l^i/lf/f^l^-a? 

_r 

C^U (j/g/ /Oli^ -ells vi: L i->2L>J ^ t/V~y^ colspan vji rowspan • 
-^C^lf j/j <tfoot>^ <tbody>^i <thead>/^ti> * 



**\s\$rAjL HTML 

orms 
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Google 



72 lii^J^fcJUT 



J>>7 L-\? J>)7 Uifc 




jTi f jji ^> -.d*- 0-j 














-Si 




©Yes 0 No C Other 


B Check _ Check _ Check 





Ud =ad 



i f Browse, 7" ) 
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<form acti on-"http : / /www .example.com/subscribe.php' 
method-"get"> 

<p>This is where the form controls will appear. 
</p> 
</f orm> 



This is where the form controls will appear. 



74 (Jjfii}$ldtf 




^sbtiS <forms> 

jf' jt t/i-o? £_y 1 ?V f ^ ^"V-^' ^- ^' J,< "r- ^ ^ ^ 

\jr id>i» method jtjijii -<£_trlf uC ^>>(J;u (action) ^j^^i 



^xtyti action 

jA<C^$fo action-tf-lr^>>(/>i) actional <form>yr 

^j^yki method 

get .2 post . l 

i^get 
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:^lrlfl/( J|^i<j£uj^US£ get 

impost 

^l^^i^^geU^^jy^U [f J$ Jb^i^j^i method/^! 



76 Jjfid&drf 




J$ <input> 

\j2Jzft\jt^)Iiu'\~^siiJ\^\A-IiiJC'j) J& jj^i i <input> 

type="text" 

yJ^Q^rA^^fJ type^> 

Name 

^"^)\ /c-JsJk<dl fttfkJjied /n- namQ-^ij^^^y^p name 

Max Length 

J%j^^utZ_/Jl^w^j^~/bi maxlengthji j^iZI <input>^ 

-USZ-st digits&j^jtiJ^/^-ijzAfijk)^ maxlentW'iZl 
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type="pas sword" 

Name 

/ji/^y^^i f«z- f If (password)j^ j£ ^j^i Name 

maxlength 

,> V ji jri? jj/, C ')> /^di-atifjsjf 6*> i^J? 4.A £- control 
jt -<f- b& l^s »i jfit U,Xj SSL 
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<f orm acti on-"http: //www. exampl e .com/login.php"> 
<p>Username : 

<input type-"text" name-"username" size-"15" 
maxl ength-"30" /> 

</p> 

<p>Password : 

<input type-"password" name-"password" size-"15" 
maxl ength-"30" /> 

</p> 
</f orm> 




Uscmamc: ivy 
Password: • 
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Us 




txJ^tA-^^.^tJl^^iP^ ^(j/jJsjLJ^^ij^l <textarea> 
-<z-kyt y_ </ textaTGa>J@Jej/j)i <extarea>u4?^jf^fJ^U-<£_ 
comments^ iiiy ?t ^t*>f^x k ~/ti name^'i^L/ 1 

>±*?»/Sl COls 4- £ Oft" 

J^j£-/J rows A- H j>\ 
<s£»\j6\ jt j&s iS^l jit <\J$LJ& 



<form acti on-"http: //www. exampl e . com/ comments . php"> 
<p>What did you think of this? </p> 
<textarea name-"comments" cols-"20" rows-"4">Enter 
your comments ... </textarea> 

</f orm> 

What did you think of this ? 



Enter your comments.. 
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<input type=" radio "> 

3/'^d^fJJ&*)Su$'L r )*)rfJ (visiter) st: ^^c, f ^ J* jXj 

&g-/st Name 

L Jir- jTi A. t/l -f - ^jSPe-*^ d /» ^ j> / iS' 2L J ' } ^ name -<r- fcV 
till if JL^g-jti name^>*i £#ff I? <u>f cA^/ U^c^T^^ ^ztLjA 

^st-fi value 

J^S-fJ chekced-(<£.j£ 
i£ if' ^ <j£ £ <=- ^ i/' -f- J-** checked J* Jjj jV' 
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-^Jt^i checked 



^Jfcjitj& uli) J>j\*> S Jc^> <& U \f ji (deselect) 



HTML 



<form action="http://www.example.com/profile.php"> 
<p>Please select your favorite Reciter: 
<br /> 

<input type="radio" name="genre" value="Abdul Basit" 

checked="checked" /> Abdul Basit 
<input type="radio" name="genre" value="AI-Tarooti" /> 

Al-Tarooti 

<input type="radio" name="genre" value="AI-Hindawi" /> 
Al-Hindawi 
</p> 
</form> 



RESULT 



Please s-elect your favorite Reciter: 
I Abdul Basit ! AJ Tarooti . AJ Hin&rvvi 



jit, t 
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<input type="checkbox"> 

••V *ijf S ** — — »* w»« #» *♦ | Ml • •* • 

Name 

Jvj / i/j^i Jl^j^Ai Name ^ l>Jl> Zl i/i ^C^TiJ>;y <^y4 

value 

XfJi 

checked 

^^JtfurtfjtMg^SijLJzA f £^.)f2LA<C^>t~fJ Checked 



86 lii^J^fcJUT 
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<form action="http://www.example.com/profile.php"> 
<p>Please select your favorite Qari(s): 
<br/> 

<input type="checkbox" name="Qira'at" 
value="AbdulBasit" checked-'checked" /> Abdul Baslt 
<in put type="checkbox" name="Qira"at" 
value="Hindawi" /> Hindawi 
<i n put type="checkbox" name="Qira'at" 
value="Tarooqi" l> Tarooqi 
</p> 
</form> 




Please select your favourite Qari(s) 
J Abdul Basit I Hindawi Tarooti 
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J& <select> 

»ljl(2)»jj:iJlu'i-^l"Ut:j / <^&\>^\j>JZ\^j>tL^u\ <select> 

-^^^^^i 1 <option> 

name 
<option> 

&Z-\<£-Uxf'(tf? i±:-atZ_/ c ^ r*"!V^ ^4- vJ< £- <option> 
ix£j$z^\sj)<C </ options <option>_^u>f Jl^ij^-i <option> 

value 

c^T y: v>*l L <J\ -c- tst i> j A £- >i>ii <options> 
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selected 

\ytZ>^i1 ^e^k.'» i^faZLJkf® '^c>^ '2LA<C^*-fJ Selected 

<form action="http://www.example. com/profile. php"> *J a/ - / s «( / A >J Ji • 

<p>Which Qari do you listen to?</p> * ^ I/* > ' 

<select name="qari"> 

<option value-Abdul Basit''>Abdul Basit</option> it ** 1 I Sib h 

<option value="Hindawi">Hindawi</option> yr^i \**s\Ji 



<option value="Tarooti">Tarooti</option> 
</select> 
</form> 



Which Qari do you listen to 1 
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<input> 

1^1 Ji-^OjifC^^ik^' JitJ'J^ti^' JyX^^T ^ 

JxtfJ&iJg <input>jC) 'J-<Cj\7uZ^ 

type="file" 

j^ 1 W\~c-'cysiJ k '^ Browse kJsXLj* <^Ct^lJ^i<^±lui<C&J> L n 

<form action="http://www. example.com/upload.php" » „ 

method="posr> <form> jz l y (J? 2_~> vl>*f 

<p>Upload your Tilwah in MP3 format: </p> ~ « 

<input type="file" name="user-tilawah" /><br /> ^ if Jt I 

<input type="submit" value="Upload" /> Jl^.*"^ /S I >_X I y Lj j\\ i_J~ ^Ji^' \ 

</form> ~' y - * U u 

v>*i <C J*- t>f method 
get>J( uk-S* postUUj^i 
/ii get) -«L/a/ Jb^i 
VL' lT /X ^ £ post 



Upload your Tilwah in MP3 format: 



Browse... No file selected. 
| Upload I 
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yijjt\<L <form> 

£ 

-f-fcV \f£J\s£^g.jUi£ valued name/ :a> > ij'j'>lji/Lf r • 

J 5 / J>j\*> ^cf'Ul Lj/J:j\j> form elements £_ <L html 5 • 
html 5 new form 4 d^/f <jf ^' -f- (Jlf (3^ 

-f-tf'lf \j° k Ji£-fb/ elements 



* « « 





{Jk/J id^i class 
meta 

HTML Entities 



XHTML • 

Strict HTML 1.0 • 

Transitional XHTML 1 .0 • 

,J> XHTML 1 .0 frameset • 

j£jjF$\dtjj&\JL\fib$\dij*jfyf>jjv> html Sut^^oopA 

Doctype 
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JL-\Ajf/&> doctype/^L-U 

-cJ?yitftftiJZ\*J/' doctype Declaration^ html 5 
<! DOCTYPE html> 

jU cJt &Vs\ J^' <JL Z_/Woctypes <lJj£ A- 1£ U?" L14 J* a <C J\ 

:<^2&>L/'tt^#Transitiond HTML l.O0>-cP%j/u 
<! DOCTYPE html PUBLIC 

"-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http : //www . w3 . org/TR/xhtmll/DTD/ 
xhtml 1- transitional . dtd"> 
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jt^b)iy^yitj> /if ^header sectionIO<L#2£-f ifJ&tf ij^t^L^L 
L }>J\U^ ^2-xfif 'Header starts here^U-KiS^^c/' 

-iji } 'Header ends here i st 
£j2<d$hri*h&\f$ l &i'id'lf r$>.f 'Usidif. ^ifC^^i 
&!U*j><-fj*A /(J>~ dlu , \j r \/s3&AjJ&&j»s Sid $f \a 

-jZl—rt&^jtij.csf.ijr^ £jnji<£-dsi 

tlfi^^^if, ^Jy^yj^^t/ffUi^SjtJ^ fiji\J?lS^^ 
/jf^iJ^SlSu'^^^^-^if^^^^^Jl^^if^'^ 
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ft s_&^ r c>^ijtts./stjj^l'^ r c) "c^IjjL"L conraient "uif"^^\^J\ 

ft $ u > e-0<i—fjg source code 1^1^ jm^U-Tj^ 

xfttdj* 



HTML 



<!— start of introdaction — > 
=: h 1 > dummy dummy < h \ > 
■ h2 = dummy dummy < h2-- 
<!— end of introduction — > 
<!-- start of main text — > 
; -p>dummy dummy dummy dummy </p> 
<p>dummv dummy dummy dummy dummy dummy 
dummy dummy dummy dummy dummy dummy 
dummy dummy dummy dummy dummv dummv 
dummy dummy dummy dummv dummv dummv 
dummy dummy dummy dummy dummy dummy 
dummy dummv dummy dummv dummv dummy </p> 
<!— end of main text — > 
<!— 

<a href="maUto:info(a example.org" >Contact</a> 



<!-- comment --> 

ft~i k , jirC jt jt> 



dummy dummy 

dummy dummy 



dummv dummv dummv dummv dummv dummv 
dummy dummy dummy dummy dummv dummv 
dummy dummy dummy dummy dummy dummy 
dummy dummv dummv dummv dummv dunirnv 
dummv dummv dummv dummv dummv dummv 
dummv dummv dummy dummy dummv dummv 



RESULT 
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lj} Jjl Jt till <u? ^J'^» ^ 5 j£ S v Jf» S^fj}-UZ2J& 

<p id"quote"> your text </p> 

quoted (/(^^Utl^^j^i id^i£^GJiy^)<p>c£^i/i 

l^ySt/^ji^C /cJ'"$> (underscore)^ j^Jn/^i • 

t - " 
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HTML 



<p>Water and air. So very commonplace are these 
substances, they hardly attract attention - and 
yet they vouchsafe our very exi s tence . </p> 

<p i d-"pul 1 quote">Every time I view the sea I feel 
a calming sense of security, as if visiting my 
ancestral home; I embark on a voyage of seeing. 
</p> 

<p>Mystery of mysteries, water and air are right 
there before us in the sea.</p> 



RESULT 



Water and air. So very commonplace are these 
substances, they hardly attract attention • and yet 
they vouchsafe our very existence. 

EVERY TIME I VIEW THE SEA I FEEL A 
CALMING SENSE OF SECURITY, AS IF 
VISITING MY ANCESTRAL HOME; I 
EMBARK ON A VOYAGE OF SEEING. 

Mystery of mysteries, water and air are right there 

before us in the sea. i 
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^L,fJ\&i±j$.jy class f^£j'Gtf&)titf ? )/>/u^"U)ij<^Jt\ 

ScSS/jitju£ L f^r?~fj class 

<p class="important"> this is a paragraph </p> 

Su* lA^ class j^tyti Ji\ v>*i Zl li^ti p S<jt£-j£>>J\ jt Jl>t/ ( 

important.^ 

^ ^ ^ liV^ ^ J%M> Jfi & class jCtfJi<if£. attribute 
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HTML 



<p cl ass-"important">For a one-year period from 
November 2010, the Marugame Geni chi ro- Inokuma 
Museum of Contemporary Art (MIMOCA) will host a 
cycle of four Hiroshi Sugimoto exhi bi ti ons . </p> 

<p>Each will showcase works by the artist 

thematically contextual i zed under the headings 
"Science," "Architecture," "History" and 
"Religion" so as to present a comprehensive 
panorama of the artist's oeuvre.</p> 

<p cl ass-"important admi ttance">Hours : 10:00 - 18:00 
(No admittance after 17:30)</p> 



RESULT 



FOR A ONE- YEAR PERIOD FROM NOVEMBER 2010, 
THE MARUGAME GENICH1RO-INOKUMA MUSEUM 
OF CONTEMPORARY ART (MIMOCA) WILL HOST A 
CYCLE OF FOUR HIROSHI SUGIMOTO EXHIBITIONS. 

Each will showcase works by the artist thematically 
contextualized under the headings "Science," "Architecture," 
"History" and "Religion" so as to present a comprehensive 
panorama of the artist's oeuvre. 

HOURS: 10:00 18:(X) (NO ADMITTANCE AFTER 17. .Mil 
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Block Level Elements 

/cT^I 41 -U? L-x l>/ cl, c/D (5 Jtfi P. {J 41 u^-ijCuZ Jj (~\ & $1 

-<zJ:\e\f block level 

<hl>, <p>, <ul>, <li> 

-zJcyiJ'- block level elementsvPe(y^"iiJL^>>4> 














Block Elements 



Inline Elements 

<a>, <b>, <em>, <img> 
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_^l~Ul/lnline Elements/tT^UL^j 



Inline Elements 

J$ <div> 

^2-f^»ff£j»\J^\Jfcf^AL.&ii\ <div> 
-^frxcf^xijiif: M*±s\s*~c>jji\£LjM-j >£jjji\L. <div> 

p 
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J Jit, div tS^ii'S*^ ttz&^ii^S'UZ 
^tK^Jil LJ* U~ divs J& / Ui^ Jfc L ^ ^c> f\ 

L divyijj'-jljjiij y\fi4^<j\j!iZ-xu^\iJ£if. ^ZjaLj^-j div 

warm ~^ jyi 



<div id="header"> 
<ul> 

<li><ahref="index.html">Home</a></li> 
<li><a href="biography.html">Biography 

</a></li> 

<li><ahref="works.htmI">Works</a></li> 
<li><a href="contact.html">Coiitact</a> 
</li> 
</ul> 

</div><!— end of header — > 



div JZ\ / jU t^j!) 

»* •* ** £ * 







1 RESULT 






" Bioeraohv 
• Contact 












4>fcA t 
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<span> 

/ lT^i U& f if- sLA L ^idiv/^tU Zl <div> ^ 
(j^ J?UJ l -c- l>/ n~ cfl) jfl Jkix jf Jan J%>f* eft < at 

J>)ftf\i ijiyvlj^u^^Jl^iJ-^ J>jf\f'<±^*h span \j /, <L \J\ 
^ (ivlrt ~lL J% Jj> span f jt ^j)L Jiifi if- -<z- l/Jl?>i <L £ 

:^tfJ\^i2-<C^>&»jJ^j span 

?UtZ^/Jl^!j^>i! span 
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£<cJcsi \)f>\t>±,!t~}tb idl class^VZlj^i <span>jY^te^l^(^T 

^4-^^(^i(^i(/y4'l/lj span/ greatest qurra's/o^c^J^t/' 

-cjflfjt capitals 



<p>Shiekh Ramadan Al-Hindawi is one of 
the <span class="gallery">Greatest 
QuiTa's</span>, who visited Pakistan, 
recently.</p> 



RESULT 



Shiekh Ramadan Al-Hindawi is one of the GREATEST QURRA'S. who 
visited Pakistan, recently. 
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<iframe> 

src 
Height 
Widht 
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HTML 



<iframe 

src="http://maps. google. co. uk/maps?q=moma+karachi 

&output=embed" 

width="450" 

height="350" 

</iframe> 









>> 6 






arger map 




/ / , V 








\!J 






.IE 

* 


* f > 
V//** 

A # & 


\ 

% 

Google % 




+ 




SZGISGcogte-Map data £20' 5 Googte 


s-ms of _l*s 


Report a map error 



RESULT 
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<meta> 

<^AJ1@^)P^jj:\J1j'\>C&LJ)jj:\£j^J <head>Ju>^ <meta> 
-tytjif J$Jcj/{j\$<^j^iAj (stand alone)ij£ JTiJU-^i <meta> 

* h 

trUJ/Jl^iJV^ooi 'contend 

contents i' jjii name-^ 

£i S^g"M name jt j^i <meta> f ^ lA Jl> S 4? 
S^rt-fi n&mQ.^\fij}^J^)tjt%i{jtj^!t~fJ content^^ description 
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Description 
keywords 
robots 

f\j»\-LJr\f, iJ&utdJzjfy /A ^^c>J\/iyt^J^^Q noindex^ \ij~\f\ 
cft.^/J \> Jt c^iiy/ ^\s^z> Wtjib/ Styt yJb* faO* nofollow^i 

-^AJ&A ' $<js£/£r>\jfi 

2-*iJ\i^\J\sJ\s\f*tj J )t~/'J contents! http-equiv^'i^^i^i meta 

author 
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pragma 

-f-L~lf lf(Jfef\ )caching 

expires 



HTML 



<!DOCTYPE html> 

<html> 

<head> 

<title>Inf ormati on About Your P a g e s </title> 
<meta name="description" 

content="An Essay that describes ITDG- the gateway 

of learning" /> 

<meta name="keywords" 

content="installation, art, opinion" /> 

<meta name="robots" 

content="nofollow" /> 

<meta http-equiv="author" 

content="A.Rafi" /> 

<meta http-equiv="pragma" 

content="no-cache" l> 

<meta http-equiv="expires" 

content="Fri, 04 Apr 2014 23:59:59 GMT" /> 

</head> 

<body> 

</body> 

</htral> 



no Jjfid&di*' 




t 

« 

HTML Entities 

flf l/character jt d L 3 ii)#ff& iJi* I ^J;7 u? 4- ^fjt^A^Lj/i 

< { p 3 T 

escape characters • 

escape codes • 

entity reference • 

Ljr$/j£\^utuj»difJa2^(<i?")^. left angel^/i&> 
< or &#60 

&#38 ; 



ill (ii^j^fcJUT 

<L-&/9jjfii&tf£\j?lsAu£' ylO^J ' f\-£L* •) vlr '-j^ &Jjf spaces 
j07u?£~> spaces 10 jtjj fii$iJ '*Jf/itJjl l J ^jA/sJj* Jfi<JS'f 

&nbsp ; 

wT^V^/^J^/^Jlf^^L^^^/J^^escape codes 

j>\ / capital letters (f~ -j* case sensitive ft _1 entities 

-qjSjsftJdt^f small letters 

www.w3schools.com/html/html_entities.asp 



112 




-if-tfjsi'&A iJttfio&tgS^fyyZx/jJSUe-cfi fa Doctype ✓ 

-ui^LJu^ j\sj>L<\—ji\—>J\ ✓ 

Jj^jl^/ <span>vii <div> ✓ 

-ctf^l/^^UvcitX^ iframe ✓ 

/ iS/tl>* c/r^ ,_^> L~lf l/Jt^i / entities L escape characters ✓ 



, * ♦ 



